<template>
  <el-container>

    <el-row>
      <el-form ref="form" :model="form" label-width="100px" label-position="left">
        <el-form-item label="提现状态" size="small">
          <el-radio-group v-model="radio3" fill="#1AB394">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="等待审核"></el-radio-button>
            <el-radio-button label="审核成功"></el-radio-button>
            <el-radio-button label="审核失败"></el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="时间" size="small">
          <el-radio-group v-model="radio4" fill="#1AB394">
            <el-radio-button label="不限"></el-radio-button>
            <el-radio-button label="近一周"></el-radio-button>
            <el-radio-button label="近一月"></el-radio-button>
            <el-radio-button label="近三月"></el-radio-button>
            <el-radio-button label="自定义"></el-radio-button>
          </el-radio-group>

          <el-date-picker
            class="el-date-picker"
            v-model="value5"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            v-if="radio4 == '自定义'">
          </el-date-picker>

        </el-form-item>
        <el-form-item size="small">
          <el-button type="success" @click="submitForm('form')">筛选</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      border
      :default-sort="{prop: 'date', order: 'descending'}"
      :row-class-name="tableRowClassName"
      size="small">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="userAppId"
        label="用户小程序id"
        width="120">
      </el-table-column>

      <el-table-column
        prop="appName"
        label="小程序名称"
        width="120">
      </el-table-column>

      <el-table-column
        prop="moduleName"
        label="对接模块"
        width="120">
        <template slot-scope="scope">
          <el-tag type="primary">{{scope.row.moduleName}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="appId"
        label="APPID"
        width="150">
      </el-table-column>

      <el-table-column
        prop="username"
        label="用户名"
        width="120">
      </el-table-column>

      <el-table-column
        prop="shopName"
        label="店铺名"
        width="120">
      </el-table-column>

      <el-table-column
        prop="firstDate"
        label="发起时间"
        sortable>
        <template slot-scope="scope">
          <i class="fa fa-fw fa-clock-o"></i>
          <span style="margin-left: 10px">{{ scope.row.firstDate }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="lastDate"
        label="操作时间"
        sortable>
        <template slot-scope="scope">
          <i class="fa fa-fw fa-clock-o"></i>
          <span style="margin-left: 10px">{{ scope.row.lastDate }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="status"
        label="交易状态"
        sortable
        width="100">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.status==0">拒绝</el-tag>
          <el-tag type="info" v-if="scope.row.status==1">等待审核</el-tag>
          <el-tag type="success" v-if="scope.row.status==2">同意</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            circle
            icon="fa fa-fw fa-server"
            size="mini"
            type="primary">
          </el-button>

          <el-button
            circle
            icon="fa fa-fw fa-check"
            size="mini"
            type="success">
          </el-button>

          <el-button
            circle
            icon="fa fa-fw fa-remove"
            size="mini"
            type="info"
            @click="handleDelete(scope.$index, scope.row)">
          </el-button>

          <el-button
            circle
            icon="fa fa-fw fa-trash-o"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">
          </el-button>

        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

  </el-container>
</template>

<script>
  export default {
    mounted() {
      this.restaurants = this.loadAll();
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
    data() {
      return {
        tableData: [
          {
            userAppId: '1',
            appName: '店铺',
            moduleName: '智慧外卖',
            appId: 'wx703e232d4fb8871f',
            username: '小星星',
            shopName: '辣子店铺',
            firstDate: '2018/7/8',
            lastDate: '2018/8/8',
            status: 1,
          }
        ],
        multipleSelection: [],
        radio3: '',
        radio4: '',
        radio5: '',
        restaurants: [],
        state4: '',
        timeout: null,
        value4: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value5: ''
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-table, .el-row {
    width: 98% !important;
    margin: 15px auto;
  }

  .el-pagination {
    text-align: center;
    margin: 15px 0;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .logo-img {
    width: 40px;
    height: 40px;
  }

  .el-date-picker {
    top: -3px;
    margin: 0 0 0 15px;
  }
</style>
